<template>
  <div class="carbon-platform">

    <nav class="navbar sticky-top bg-white shadow-sm py-3">
      <div class="container">
        <div class="d-flex justify-content-between align-items-center w-100">
          <!-- 网站标志 -->
          <div class="navbar-logo">
            <span class="logo-icon">🌱</span>
            <span class="logo-text">绿碳平台</span>
          </div>

          <!-- 中间导航链接 - 桌面版 -->
          <ul class="navbar-nav list-unstyled d-flex flex-row gap-3 gap-lg-5 justify-content-center flex-wrap align-items-center mb-0 fw-bold flex-grow-1 mx-4">
            <li class="nav-item">
              <a href="/index" class="nav-link text-dark hover:text-primary transition-colors">首页</a>
            </li>
            <li class="nav-item">
              <a href="/shop" class="nav-link text-dark hover:text-primary transition-colors">碳积分市场</a>
            </li>
            <li class="nav-item">
              <a href="/blog" class="nav-link text-dark hover:text-primary transition-colors">博客</a>
            </li>
            <li class="nav-item">
              <a href="/contact" class="nav-link text-dark hover:text-primary transition-colors">联系我们</a>
            </li>
            <li class="nav-item">
              <a href="/about" class="nav-link text-dark hover:text-primary transition-colors">关于我们</a>
            </li>
            <li class="nav-item">
              <a href="/order" class="nav-link text-dark hover:text-primary transition-colors">我的订单</a>
            </li>
          </ul>

          <!-- 右侧功能区 - 使用emoji图标 -->
          <div class="d-flex align-items-center gap-4 gap-lg-5">
            <!-- 搜索按钮 -->
            <button class="btn p-2 text-dark hover:text-primary transition-colors" aria-label="搜索">
              <span class="fs-5">🔍</span>
            </button>

            <!-- 购物车 -->
            <a href="/cart" class="btn p-2 text-dark hover:text-primary transition-colors position-relative" aria-label="购物车">
              <span class="fs-5">🛒</span>
<!--              <span class="position-absolute top-0 right-0 btn-success text-white text-xs rounded-full h-5 w-5 flex items-center justify-center" style="border-radius: 50%;">3</span>-->
            </a>

            <!-- 用户菜单 -->
            <div class="dropdown">
              <button class="btn p-2 text-dark hover:text-primary transition-colors" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="用户菜单">
                <span class="fs-5">👤</span>
              </button>
              <ul class="dropdown-menu dropdown-menu-end">
                <li><a class="dropdown-item" href="/login">登录</a></li>
                <li><a class="dropdown-item" href="/register">注册</a></li>
                <li><a class="dropdown-item" href="/account">我的账户</a></li>
              </ul>
            </div>

            <!-- 移动端菜单按钮 -->
            <button class="btn d-lg-none p-2 text-dark" type="button" data-bs-toggle="offcanvas" data-bs-target="#mobileMenu" aria-label="菜单">
              <span class="fs-5">☰</span>
            </button>
          </div>
        </div>
      </div>
    </nav>

    <!-- Preloader -->
    <div class="preloader-wrapper" v-if="isLoading">
      <div class="preloader"></div>
    </div>

    <!-- 顶部横幅（修改为博客样式） -->
    <div class="banner-section blog-banner">
      <div class="container">
        <div class="banner-content">
          <h1 class="banner-title">碳中和绿色博客</h1>
        </div>
      </div>
    </div>

    <!-- 博客主内容区 -->
    <main class="blog-page py-5">
      <div class="container-lg">
        <div class="blog-content">
          <div class="row row-cols-1 md:row-cols-2 lg:row-cols-3 g-4">
            <!-- 博客文章卡片 - 自动根据屏幕宽度调整列数 -->
            <div class="col" v-for="post in paginatedPosts" :key="post.id">
              <article class="card blog-card shadow-sm">
                <!-- 卡片内容保持不变 -->
                <img :src="post.image" class="card-img-top" :alt="post.title">
                <div class="card-body">
                  <div class="post-meta mb-3">
                    <span class="date">{{ post.date }}</span>
                    <span class="category">{{ post.category }}</span>
                  </div>
                  <h3 class="post-title">{{ post.title }}</h3>
                  <p class="post-excerpt">{{ post.excerpt }}</p>
                  <router-link :to="`/blog/${post.id}`" class="btn btn-outline-primary">
                    阅读全文
                  </router-link>
                </div>
              </article>
            </div>
          </div>

            <!-- 分页导航 -->
            <nav aria-label="分页导航" class="mt-5">
              <ul class="pagination justify-content-center">
                <li class="page-item" :class="{ disabled: currentPage === 1 }">
                  <a class="page-link" href="#" @click.prevent="prevPage">上一页</a>
                </li>
                <li class="page-item" v-for="page in totalPages" :key="page"
                    :class="{ active: currentPage === page }">
                  <a class="page-link" href="#" @click.prevent="goToPage(page)">{{ page }}</a>
                </li>
                <li class="page-item" :class="{ disabled: currentPage === totalPages }">
                  <a class="page-link" href="#" @click.prevent="nextPage">下一页</a>
                </li>
              </ul>
            </nav>
          </div>
      </div>
    </main>

    <!-- 相关推荐部分 -->
    <section class="related-searches py-5 bg-light">
      <div class="container-lg">
        <h2 class="section-title mb-4">大家都在搜</h2>
        <div class="d-flex flex-wrap gap-2 mb-5">
          <a href="#" class="fs-6 badge bg-white text-dark border px-3 py-2 text-decoration-none"
             v-for="item in relatedSearches" :key="item"
             @click.prevent="searchItem(item)">
            {{ item }}
          </a>
        </div>
      </div>
    </section>

    <!-- 页脚部分 -->
    <footer class="main-footer">
      <div class="container">
        <div class="footer-bottom">
          <p class="copyright">© 2025 绿碳平台 版权所有 | 京ICP备12345678号</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'Blog',
  data() {
    return {
      isLoading:false,
      cartItems:[],
      currentPage: 1,
      postsPerPage: 3, // 每页显示3个博客卡片
      posts: [
        {
          id: 1,
          image: '/images/blog/carbon1.jpg',
          date: '2024年8月22日',
          category: '政策解读',
          title: '中国碳中和目标实现路径分析',
          excerpt: '深入解析"双碳"目标下的政策框架与实施路径，探讨能源结构转型的关键节点与挑战。'
        },
        {
          id: 2,
          image: '/images/blog/carbon2.jpg',
          date: '2025年1月25日',
          category: '企业实践',
          title: '全球500强企业碳中和实践案例',
          excerpt: '分析微软、苹果等国际巨头实现碳中和的具体措施，揭示企业低碳转型的有效模式。'
        },
        {
          id: 3,
          image: '/images/blog/carbon3.jpg',
          date: '2025年2月28日',
          category: '个人行动',
          title: '个人碳中和的10种日常实践方法',
          excerpt: '从衣食住行等方面介绍普通人可践行的低碳生活方式，积少成多助力碳中和目标。'
        },
        {
          id: 4,
          image: '/images/blog/carbon4.jpg',
          date: '2024年9月15日',
          category: '技术创新',
          title: '碳捕获与封存技术的最新突破',
          excerpt: '详解碳捕获技术的原理、应用场景及商业化前景，分析其在碳中和中的战略地位。'
        },
        {
          id: 5,
          image: '/images/blog/carbon5.jpg',
          date: '2024年10月5日',
          category: '能源转型',
          title: '可再生能源与电网协同发展路径',
          excerpt: '探讨太阳能、风能等可再生能源如何与智能电网结合，加速能源系统低碳转型。'
        },
        {
          id: 6,
          image: '/images/blog/carbon6.jpg',
          date: '2024年11月20日',
          category: '碳市场',
          title: '全国碳市场建设与发展前景',
          excerpt: '解析碳交易机制的运作原理，分析中国碳市场的发展现状与未来趋势。'
        },
        {
          id: 7,
          image: '/images/blog/carbon7.jpg',
          date: '2024年12月10日',
          category: '建筑节能',
          title: '零碳建筑设计的核心要素',
          excerpt: '从材料选择、能源系统、智能管理等方面介绍零碳建筑的实现方式与案例。'
        },
        {
          id: 8,
          image: '/images/blog/carbon8.jpg',
          date: '2025年1月5日',
          category: '交通减排',
          title: '新能源汽车与交通碳中和路径',
          excerpt: '分析新能源汽车发展对交通领域减排的贡献，探讨充电基础设施建设的关键问题。'
        },
        {
          id: 9,
          image: '/images/blog/carbon9.jpg',
          date: '2025年2月15日',
          category: '国际合作',
          title: '全球碳中和合作的机遇与挑战',
          excerpt: '探讨国际社会在碳中和目标下的合作机制，分析气候资金与技术转让的重要性。'
        },
      ],
      categories: [
        '全部文章',
        '政策解读',
        '技术创新',
        '企业实践',
        '个人行动',
        '能源转型',
        '碳市场'
      ],
      recentPosts: [
        {
          id: 10,
          thumb: '/images/blog/carbon-thumb1.jpg',
          title: '碳足迹计算方法与工具指南',
          date: '2025年3月15日'
        },
        {
          id: 11,
          thumb: '/images/blog/carbon-thumb2.jpg',
          title: '林业碳汇项目的开发与管理',
          date: '2025年3月10日'
        }
      ],
      relatedSearches: [
        '碳达峰', '碳足迹', '绿电', '碳交易', '碳抵消',
        '可再生能源', '低碳生活', '碳核算', 'ESG', '气候金融','碳积分',
        '绿色发电','绿色金融','环保'
      ],
    }
  },
  computed: {
    // 计算当前页应该显示的文章
    paginatedPosts() {
      const start = (this.currentPage - 1) * this.postsPerPage;
      const end = start + this.postsPerPage;
      return this.posts.slice(start, end);
    },
    // 计算总页数
    totalPages() {
      return Math.ceil(this.posts.length / this.postsPerPage);
    }
  },
  methods: {
    // 上一页
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    // 下一页
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    // 跳转到指定页
    goToPage(page) {
      this.currentPage = page;
    },
  }
}
</script>

<style scoped>
.organic-store {
  font-family: 'Nunito', sans-serif;
}

.banner-section {
  background-image: url('../../public/images/banner-1.jpg');
  background-size: cover;
  background-position: center;
  height: 300px;
  display: flex;
  align-items: center;
  position: relative;
}

.banner-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
}

.banner-content {
  position: relative;
  z-index: 1;
  color: #fff;
  padding: 20px;
}

.breadcrumb {
  background-color: transparent;
  padding: 0;
  margin-bottom: 15px;
}

.breadcrumb-item {
  color: #fff;
}

.breadcrumb-item.active {
  color: rgba(255, 255, 255, 0.8);
}

.breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.8);
}

.banner-title {
  font-size: 3rem;
  font-weight: 700;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  margin: 0;
}

@media (max-width: 768px) {
  .banner-section {
    height: 200px;
  }

  .banner-title {
    font-size: 2rem;
  }
}
.checkout-page {
  background-color: #f8f9fa;
}


/* 博客卡片 */
.blog-card {
  transition: transform 0.3s;
  border: none;
}
.blog-card:hover {
  transform: translateY(-5px);
}

.blog-card .card-img-top {
  height: 250px;
  object-fit: cover;
}

/* 文章元信息 */
.post-meta {
  font-size: 0.9rem;
  color: #6c757d;
}
.post-meta .date {
  margin-right: 15px;
}
.post-meta .category {
  background: #f8f9fa;
  padding: 3px 8px;
  border-radius: 4px;
}

/* 文章标题 */
.post-title {
  font-size: 1.5rem;
  margin: 15px 0;
  color: #333;
  line-height: 1.3;
}

/* 侧边栏 */
.sidebar-card {
  border: none;
  margin-bottom: 30px;
}
.sidebar-title {
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  margin-bottom: 15px;
}

.category-list {
  list-style: none;
  padding-left: 0;
}
.category-list li {
  margin-bottom: 8px;
}
.category-list a {
  color: #333;
  text-decoration: none;
}
.category-list a:hover {
  color: #0d6efd;
}

/* 近期文章 */
.recent-post {
  display: flex;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f5f5f5;
}
.recent-post:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.recent-post .thumb {
  width: 70px;
  height: 70px;
  object-fit: cover;
  margin-right: 15px;
}
.recent-post h6 {
  font-size: 0.95rem;
  margin-bottom: 5px;
  line-height: 1.3;
}
.recent-post small {
  color: #6c757d;
}

/* 分页 */
.pagination .page-item.active .page-link {
  background-color: #ffffff;
  border-color: #28a745;
}
.pagination .page-link {
  color: #28a745;
}
</style>